<template>
  <el-drawer
    v-model="drawerVisible"
    :modal="false"
    :destroy-on-close="true"
    size="1360px"
    title="客户详情"
    :append-to-body="true"
    class="client-detail-drawer"
  >
    <div class="detail-wrap" v-loading="detailLoading">
      <edit v-if="isEdit" @cancel="isEdit = false" @save="clientInfoSave"></edit>
      <div class="top-info" v-if="!isEdit">
        <div class="header flx-justify-between">
          <div class="avatar-and-name flx-align-center">
            <img src="@/assets/images/client-img.png" />
            <div class="name">
              <div class="text">客户名称</div>
              <div class="client-name">北京中科同志科技有限公司</div>
            </div>
          </div>
          <div class="right-btn">
            <el-button @click="clickEdit">编辑</el-button>
            <el-button type="primary" icon="Plus" @click="openDrawerCreateContract">创建合同</el-button>
          </div>
        </div>
        <ul class="info-list flx">
          <li class="item">
            <div class="label">客户级别</div>
            <div class="value">
              <el-tag effect="dark">S2-已签单</el-tag>
            </div>
          </li>
          <li class="item">
            <div class="label">客户状态</div>
            <div class="value">
              <div>待回款</div>
            </div>
          </li>
          <li class="item">
            <div class="label">业务类型</div>
            <div class="value pointer">
              <el-dropdown placement="bottom">
                <div class="text-primary">
                  商标注册(普通)个人
                  <span class="num">+3</span>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>The Action 1st</el-dropdown-item>
                    <el-dropdown-item>The Action 2st</el-dropdown-item>
                    <el-dropdown-item>The Action 3st</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </li>
          <li class="item">
            <div class="label">客户来源</div>
            <div class="value">
              <div>推广</div>
            </div>
          </li>
          <li class="item">
            <div class="label">客户行业</div>
            <div class="value">
              <div>其他专用设备</div>
            </div>
          </li>
          <li class="item">
            <div class="label">所在地</div>
            <div class="value">
              <div>北京市</div>
            </div>
          </li>
          <li class="item">
            <div class="label">领取日期</div>
            <div class="value">
              <div>2024-04-02 08:00</div>
            </div>
          </li>
          <li class="item">
            <div class="label">最新跟进时间</div>
            <div class="value">
              <div>2024-04-02 08:00</div>
            </div>
          </li>
        </ul>
      </div>
      <div class="other-info flx">
        <div class="card left-card">
          <el-tabs v-model="currentTabsType">
            <el-tab-pane
              :label="item.name"
              :name="item.key"
              v-for="item in tabsList"
              :key="item.key"
              @change="currentTabsType = item.key"
            ></el-tab-pane>
          </el-tabs>
          <div class="card-content">
            <!-- 跟进 -->
            <follow-up v-if="currentTabsType == 'followUp'"></follow-up>

            <!-- 客户材料 -->
            <client-materials v-if="currentTabsType == 'material'"></client-materials>

            <!-- 案件进度 -->
            <case-progress v-if="currentTabsType == 'cases'"></case-progress>

            <!-- 合同 -->
            <Contract v-if="currentTabsType == 'contract'"></Contract>

            <!-- 回款 -->
            <return-money v-if="currentTabsType == 'return'"></return-money>

            <!-- 发票 -->
            <invoice v-if="currentTabsType == 'invoice'"></invoice>

            <!-- 联系人 -->
            <contact v-if="currentTabsType == 'contact'"></contact>

            <!-- 企业信息 -->
            <enterprise-info v-if="currentTabsType == 'enterprise'"></enterprise-info>

            <!-- 款项支出 -->
            <expenditure v-if="currentTabsType == 'expenditure'"></expenditure>
          </div>
        </div>
        <div class="card right-card">
          <!-- 客户日志 -->
          <customer-log></customer-log>
        </div>
      </div>
    </div>

    <!-- 创建合同 -->
    <create-contract ref="createContractRef"></create-contract>
  </el-drawer>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive } from "vue";
import { getCustomerDetailsData } from "@/api/modules/myClient";
import FollowUp from "./FollowUp.vue";
import CustomerLog from "./CustomerLog.vue";
import CreateContract from "./CreateContract/index.vue";
import ClientMaterials from "./ClientMaterials/index.vue";
import CaseProgress from "./CaseProgress/index.vue";
import Contract from "./Contract/index.vue";
import ReturnMoney from "./ReturnMoney/index.vue";
import Invoice from "./Invoice/index.vue";
import Contact from "./Contact/index.vue";
import EnterpriseInfo from "./EnterpriseInfo/index.vue";
import Expenditure from "./Expenditure/index.vue";
import Edit from "./Edit.vue";

interface DrawerProps {
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref({
  id: ""
});

// 接收父组件传过来的参数
const acceptParams = params => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

// 获取客户详情
const resDetail = ref({});
const detailLoading = ref(false)
const getDetail = async () => {
  detailLoading.value = true
  let res = await getCustomerDetailsData({ id: drawerProps.value.id });
  detailLoading.value = false
  resDetail.value = res.data;
};

const tabsList = [
  { key: "followUp", name: "跟进" },
  { key: "material", name: "客户材料" },
  { key: "cases", name: "案件进度" },
  { key: "contract", name: "合同" },
  { key: "return", name: "回款" },
  { key: "invoice", name: "发票" },
  { key: "contact", name: "联系人" },
  { key: "enterprise", name: "企业信息" },
  { key: "expenditure", name: "款项支出" }
];
// 当前tabs
const currentTabsType = ref("followUp");

// 创建合同
const createContractRef = ref();
const openDrawerCreateContract = () => {
  const params = {
    title: "创建合同",
    params: {}
  };
  createContractRef.value?.acceptParams(params);
};

// 是否编辑客户信息
const isEdit = ref(false);
const clickEdit = () => {
  isEdit.value = true;
};

// 保存客户信息
const clientInfoSave = data => {
  console.log(data);
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss">
.client-detail-drawer > .el-drawer__body {
  background: #f5f7fa;
  padding: 0;
}
</style>
<style lang="scss" scoped>
@import "./style.scss";
</style>
